<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
            crossorigin="anonymous"
        />

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
            integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
            crossorigin="anonymous"
        />

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"
        ></script>
        <title>Document</title>
    </head>
    <body>
        <div style="width: 500px; height: 280px; margin: auto">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-5 control-label"
                    >商品名称：</label
                >
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" />
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-5 control-label"
                    >商品单价：</label
                >
                <div class="col-sm-10">
                    <input type="text" id="price" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-5 control-label"
                    >商品销量：</label
                >
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="volume" />
                </div>
            </div>
            <div style="width: 20px; height: 20px; margin: auto">
                <button class="btn btn-default" onclick="add()">提交</button>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" class="quanxuan" id="" />
                        商品名称
                    </th>
                    <th>商品销量</th>
                    <th>商品单价</th>
                    <th>商品操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <h3>总价：<span></span></h3>
    </body>
    <script>
        var indexs = null;
        var num = 1;
        $(function () {
            if (!localStorage.getItem("arr")) {
                localStorage.setItem("arr", JSON.stringify([]));
            }
            let data = JSON.parse(localStorage.getItem("arr"));

            data.map((res) => {
                return res.volume;
            });
            yemian(data);
        });
        function add() {
            let data = JSON.parse(localStorage.getItem("arr"));
            if (num == 1) {
                data.unshift({
                    name: $("#name").val(),
                    price: $("#price").val(),
                    volume: $("#volume").val(),
                    inp: false,
                });
                localStorage.setItem("arr", JSON.stringify(data));
                yemian(data);
                qingkong();
            } else {
                data[indexs].name = $("#name").val();
                data[indexs].price = $("#price").val();
                data[indexs].volume = $("#volume").val();
                localStorage.setItem("arr", JSON.stringify(data));
                num = 1;
                yemian(data);
                qingkong();
            }
        }
        function yemian(data) {
            let html = "";
            for (i in data) {
                html += `<tr>
                            <td>
                                <input type="checkbox" class= "inputs" onchange="inputs()" name="" id="">
                                ${data[i].name}
                            </td>
                            <td>${data[i].volume}</td>
                            <td>${data[i].price}</td>
                            <td>
                                <button onclick='del(${i})' class="btn btn-default">删除</button>
                                <button onclick='revise(${i})' class="btn btn-default">修改</button>
                            </td>
                        </tr>`;
            }
            $("tbody").html(html);
        }

        function del(index) {
            let data = JSON.parse(localStorage.getItem("arr"));
            data.splice(index, 1);
            localStorage.setItem("arr", JSON.stringify(data));
            yemian(data);
        }

        $(".quanxuan").change(function () {
            $(".inputs").prop("checked", $(this).prop("checked"));
        });

        function inputs() {
            let data = JSON.parse(localStorage.getItem("arr"));
            console.log($(".inputs:checked"));
            if ($(".inputs:checked").length == data.length) {
                $(".quanxuan").prop("checked", true);
            } else {
                $(".quanxuan").prop("checked", false);
            }
        }

        function revise(index) {
            let data = JSON.parse(localStorage.getItem("arr"));
            $("#name").val(data[index].name);
            $("#price").val(data[index].price);
            $("#volume").val(data[index].volume);
            num = 2;
            indexs = index;
        }

        function qingkong() {
            $("#name").val("");
            $("#price").val("");
            $("#volume").val("");
        }
    </script>
</html>

